<!--工作信息-->
<template>
  <div class="table-container">
    <div class="vertical-table">
      <table border="1">
        <tr v-for="(item, index) in tableData" :key="index">
          <th class="bold-header">{{ item.label }}</th>
          <td>{{ item.value }}</td>
        </tr>
      </table>
    </div>
    <div class="steps-style">
      <el-steps  align-center>
        <el-step title="2016.09" description="2016.09入职"></el-step>
        <el-step title="2019.09" description="2019.09晋升"></el-step>
        <el-step title="2021.03" description="2021.03编辑"></el-step>
        <el-step title="2023.09" description="2023.09办公室主任"></el-step>
      </el-steps>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { label: '所属组织', value: '中文传媒' },
        { label: '部门', value: '编辑部' },
        { label: '职位', value: '编辑' },
        { label: '直属上级', value: '王磊' },
        { label: '职级', value: '集团中层' },
        { label: '职称', value: '中级' },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.table-container {
  width: 100%; /* 确保容器宽度占满父元素 */
  box-sizing: border-box; /* 确保padding不会增加容器的总宽度 */
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column;
  justify-content: center; /* 横向居中子元素 */
  align-items: center; /* 如果需要垂直居中也可以设置，但通常对表格不需要 */
  // background-color: rgb(243, 147, 29);
}
.steps-style{
  margin-top: 30px;
  width: 60%;
}
.vertical-table table {
  width: 800px;
  border-collapse: collapse;
  margin: 20px 0px 20px 0px;
  // background-color: rgb(136, 194, 121);
}
.vertical-table table,
.vertical-table td,
.vertical-table th {
  border: 1px solid black;
}
.vertical-table td,
.vertical-table th {
  padding: 8px;
  text-align: left;
}
/* 表头加粗样式 */
.bold-header {
  font-weight: bold;
}
</style>
